{% extends 'base.html' %}

{% load humanize %}

{% block title %}
  | Listings
{% endblock %}

{% block content %}

<section id="showcase-inner" class="py-5 text-white">
    <div class="container">
      <div class="row text-center">
        <div class="col-md-12">
          <h1 class="display-4">Browse Our Properties{{ name }}</h1>
          <p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt, pariatur!</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Breadcrumb -->
  <section id="bc" class="mt-3">
    <div class="container">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="{% url 'index'%}">
              <i class="fas fa-home"></i> Home</a>
          </li>
          <li class="breadcrumb-item active"> Browse Listings</li>
        </ol>
      </nav>
    </div>
  </section>
  <!-- Listings -->
  <section id="listings" class="py-4">
    <div class="container">
      <div class="row">
        {% if storys %}
          {% for story in storys %}
          <div class="col-md-6 col-lg-4 mb-4">
            <div class="card listing-preview">
              <img class="card-img-top" src="{{ story.photo.url }}" alt="">
              <div class="card-body">
                <div class="listing-heading text-center">
                  <h4 class="text-primary">{{ story.story_title }}</h4>
                </div>
                <div>
                  <div style="text-align: center;">
                 {{ story.story_published_date }}</div>
                </div>
                <hr>
                <a href="{% url 'story' story.id %}" class="btn btn-primary btn-block">More Info</a>
              </div>
            </div>
          </div>
        {% endfor %}
        {% else %}
        <div class="col_md_12">
          <p>No Listings Available</p>
        </div>
        {% endif %}
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          {% if storys.has_other_pages %}
            <ul class="pagination">
              {% if storys.has_previous %}
                <li class="page-item">
                  <a href="?page={{storys.previous_page_number}}" class="page-link">&laquo;</a>
                </li>
              {% else %}
                <li class="page-item disabled">
                  <a class="page-link">&lsaquo;</a>
                </li>
              {% endif %}

              {% for i in storys.paginator.page_range %}
                {% if storys.number == i %}
                  <li class="page-item active">
                    <a class="page-link">{{ i }}</a>
                  </li>
                {% else %}
                <li class="page-item">
                  <a href="?page={{i}}" class="page-link">{{ i }}</a>
                </li>
                {% endif %}
              {% endfor %}
              
              {% if storys.has_next %}
              <li class="page.item disabled">
                <a href="?page={{storys.next_page_number}}" class="page-link">&raquo;</a>
              </li>
              {% else %}
                <li class="page-item disabled">
                  <a class="page-link">&rsaquo;</a>
                </li>
              {% endif %}
            
          {% endif %}   
            </ul>
          </div>
        </div>        
  </section>
{% endblock %}